Veebijuurdepääsetavuse testimine: JavaScripti ekraanilugeja ühilduvus globaalsele publikule

Tänapäeva veebimaastikul toetab JavaScript üha keerukamaid ja dünaamilisemaid kasutajakogemusi. Alates ühelehelistest rakendustest kuni keerukate interaktiivsete elementideni on JavaScript hädavajalik. Siiski seab see sõltuvus JavaScriptist märkimisväärseid väljakutseid veebijuurdepääsetavusele, eriti seoses ekraanilugejate ühilduvusega. See põhjalik juhend annab sügava ülevaate veebijuurdepääsetavuse testimisest JavaScriptiga, keskendudes ekraanilugeja kasutajatele ja globaalsetele juurdepääsetavuse parimatele tavadele.

JavaScripti ja ekraanilugejate ristumiskoha mõistmine

Ekraanilugejad on abitehnoloogiad, mis võimaldavad vaegnägijatel pääseda ligi digitaalsele sisule, teisendades teksti ja muu teabe kõneks või punktkirjaks. Kaasaegsed ekraanilugejad, nagu NVDA, JAWS, VoiceOver ja TalkBack (Android), on keerukad tööriistad. Siiski tuginevad nad sisu tõhusaks mõistmiseks ja esitamiseks aluseks olevale HTML-struktuurile ja ARIA (Accessible Rich Internet Applications) atribuutidele. Kui JavaScripti ei rakendata läbimõeldult, võib see protsessi häirida.

Põhiprobleem seisneb JavaScripti võimes dünaamiliselt muuta DOM-i (Document Object Model). Kui JavaScript värskendab sisu ilma korralike ARIA atribuutide või semantilise HTML-ita, ei pruugi ekraanilugejad neid muudatusi ära tunda, jättes kasutajatele mittetäieliku või segadust tekitava kogemuse. See on veelgi keerulisemaks tehtud erinevate ekraanilugejate ja brauserikombinatsioonide tõttu, mida kasutajad üle maailma kasutavad.

Levinumad juurdepääsetavuse väljakutsed JavaScriptiga

• Dünaamilised sisuvärskendused: Sisu värskendamine ekraanilugejat teavitamata võib põhjustada kasutajate jaoks olulise teabe saamata jäämist. Näiteks AJAX-päring, mis värskendab lehe osa ilma ARIA live-piirkonnata.
• Kohandatud juhtelemendid: Kohandatud JavaScriptil põhinevate juhtelementide (nt kohandatud rippmenüüd, liugurid, modaalaknad) loomine ilma korralike ARIA atribuutideta muudab need ekraanilugeja kasutajatele ligipääsmatuks.
• Keerulised interaktsioonid: Keerulised interaktsioonid nagu lohistamine või lõputu kerimine nõuavad hoolikat rakendamist ARIA rollide ja atribuutidega, et tagada kasutatavus.
• Fookuse haldamine: Kehv fookuse haldamine võib kasutajad lõksu püüda või jätta nad ekraanilugejaga navigeerimisel segadusse.
• Semantilise HTML-i puudumine: Üldiste <div> ja <span> elementide kasutamine semantiliste HTML5 siltide (nt <article>, <nav>, <aside>) asemel muudab ekraanilugejatele lehe struktuuri mõistmise keeruliseks.
• Animatsioonid ja üleminekud: Animatsioonid tuleks rakendada viisil, mis ei põhjusta krambihooge ega häiri kognitiivsete puuetega kasutajaid. Pakkuge võimalusi ebaoluliste animatsioonide peatamiseks või keelamiseks.

Olulised veebijuurdepääsetavuse testimise tehnikad

Veebijuurdepääsetavuse testimine nõuab mitmetahulist lähenemist. Järgmised tehnikad on JavaScripti ekraanilugeja ühilduvuse tagamiseks üliolulised:

1. Käsitsi ekraanilugejaga testimine

Käsitsi testimine ekraanilugejatega on kõige olulisem samm. See hõlmab ekraanilugeja (nt NVDA, JAWS, VoiceOver) otsest kasutamist oma veebisaidil navigeerimiseks ja selle komponentidega suhtlemiseks. See võimaldab teil kogeda veebisaiti nii, nagu ekraanilugeja kasutaja seda teeks, tuvastades potentsiaalsed kasutusprobleemid, mida automaatsed tööriistad võivad kahe silma vahele jätta.

Peamised kaalutlused käsitsi testimisel:

• Valige erinevaid ekraanilugejaid: Erinevad ekraanilugejad tõlgendavad veebisisu erinevalt. Testige mitme ekraanilugeja (nt NVDA, JAWS, VoiceOver) ja brauseri kombinatsiooniga, et tagada laialdane ühilduvus.
• Õppige selgeks ekraanilugeja põhikäsud: Tutvuge kasutatavate ekraanilugejate tavaliste käskudega (nt praeguse elemendi lugemine, pealkirjade, loendite või orientiiride järgi navigeerimine).
• Keskenduge põhifunktsionaalsusele: Eelistage kriitiliste töövoogude ja interaktsioonide testimist, nagu vormide esitamine, navigeerimine ja sisu tarbimine.
• Testige erinevatel seadmetel: Testige laua- ja mobiilseadmetes, et arvestada erinevate ekraanilugejate käitumise ja kasutajakontekstidega. Kaaluge testimist ka tahvelarvutitel.

Näide: kohandatud rippmenüü testimine

Oletame, et teil on JavaScriptiga loodud kohandatud rippmenüü. Ekraanilugejat kasutades kontrolliksite järgmist:

• Rippmenüü on klaviatuuri abil fokuseeritav (Tab-klahv).
• Ekraanilugeja teatab rippmenüü eesmärgi (nt "Vali riik").
• Ekraanilugeja teatab hetkel valitud valiku.
• Kui rippmenüü on laiendatud, teatab ekraanilugeja saadaolevad valikud.
• Klaviatuurinavigatsioon (nooleklahvid) võimaldab kasutajatel valikute vahel liikuda.
• Valiku tegemine käivitab oodatud toimingu ja ekraanilugeja teatab uue valiku.
• Rippmenüü saab sulgeda Escape-klahviga.

2. Automaatsed juurdepääsetavuse testimise tööriistad

Automaatsed tööriistad suudavad kiiresti tuvastada levinud juurdepääsetavuse probleeme, nagu puuduvad ARIA atribuudid, ebapiisav värvikontrast ja katkised lingid. Siiski ei tohiks neile tugineda kui ainsale testimismeetodile, kuna nad ei suuda tuvastada kõiki juurdepääsetavuse probleeme, eriti neid, mis on seotud keerukate JavaScripti interaktsioonidega.

Populaarsed automaatsed juurdepääsetavuse testimise tööriistad:

• axe DevTools: Brauserilaiendus ja käsurea tööriist, mis integreerub teie arendustöövoogu.
• WAVE (Web Accessibility Evaluation Tool): Brauserilaiendus, mis annab visuaalset tagasisidet juurdepääsetavuse probleemide kohta.
• Lighthouse (Google Chrome): Chrome'i DevTools'i sisseehitatud automaatne tööriist, mis sisaldab juurdepääsetavuse auditeid.
• Accessibility Insights: Microsofti tööriistade komplekt, mis sisaldab brauserilaiendusi ja Windowsi rakendust.

Automaatse testimise integreerimine oma töövoogu:

• Käivitage automaatseid teste regulaarselt: Integreerige automaatne testimine oma pideva integratsiooni (CI) konveierisse, et tabada juurdepääsetavuse probleeme arendusprotsessi varases etapis.
• Kasutage automaatseid teste käsitsi testimise täiendamiseks: Kasutage automaatseid teste potentsiaalsete probleemide tuvastamiseks enne käsitsi testimist, muutes käsitsi testimise protsessi tõhusamaks.
• Tegelege tuvastatud probleemidega kiiresti: Eelistage automaatsete testidega tuvastatud juurdepääsetavuse probleemide parandamist.

3. ARIA atribuutide valideerimine

ARIA atribuudid on hädavajalikud, et pakkuda ekraanilugejatele teavet elementide rolli, oleku ja omaduste kohta, eriti kohandatud JavaScripti komponentide puhul. ARIA atribuutide valideerimine tagab, et neid kasutatakse õigesti ja järjepidevalt.

Olulised ARIA atribuudid JavaScripti juurdepääsetavuse jaoks:

• role: Määratleb elemendi semantilise rolli (nt role="button", role="dialog").
• aria-label: Annab elemendile tekstisildi, kui nähtavat silti pole saadaval.
• aria-labelledby: Viitab teisele lehel olevale elemendile, mis annab praegusele elemendile sildi.
• aria-describedby: Viitab teisele lehel olevale elemendile, mis annab praegusele elemendile kirjelduse.
• aria-hidden: Näitab, kas element ja selle järeltulijad on abitehnoloogiate eest peidetud.
• aria-live: Näitab, et lehe ala on dünaamiline ja võib uueneda ilma lehe uuesti laadimiseta. Levinud väärtused on "off", "polite" ja "assertive".
• aria-atomic: Näitab, kas aria-live piirkonnas toimuvate muudatuste korral tuleks arvesse võtta kogu piirkonda.
• aria-relevant: Näitab, milliseid muudatusi aria-live piirkonnas tuleks teatada (nt "additions text").
• aria-expanded: Näitab, kas element on laiendatud või ahendatud.
• aria-selected: Näitab, kas element on valitud.
• aria-haspopup: Näitab, kas elemendil on hüpikmenüü või dialoog.
• aria-disabled: Näitab, et element on keelatud.

ARIA atribuutide valideerimise tööriistad:

• Brauseri arendaja tööriistad: Enamik brauseri arendaja tööriistu võimaldab teil kontrollida elementide ARIA atribuute.
• Juurdepääsetavuse linterid: Lintereid saab seadistada kontrollima levinud ARIA atribuutide vigu.

Näide: aria-live kasutamine dünaamiliste sisuvärskenduste jaoks

Kui teil on teavitusala, mis värskendub dünaamiliselt uute sõnumitega, saate kasutada aria-live atribuuti, et teavitada ekraanilugeja kasutajaid nendest värskendustest:

            <div id="notification-area" aria-live="polite">
  <!-- Teavitussõnumid lisatakse siia -->
</div>
            

              
                Copy
              
            
          

Atribuut aria-live="polite" ütleb ekraanilugejale, et ta teataks selle piirkonna värskendustest, kuid ainult siis, kui kasutaja ei suhtle aktiivselt millegi muuga.

4. Klaviatuurinavigatsiooni testimine

Klaviatuurinavigatsioon on hädavajalik kasutajatele, kes ei saa hiirt kasutada, sealhulgas vaegnägijatele, kes tuginevad ekraanilugejatele. Veenduge, et kõik teie veebisaidi interaktiivsed elemendid oleksid klaviatuuri abil ligipääsetavad.

Peamised klaviatuurinavigatsiooni kaalutlused:

• Fookuse järjekord: Fookuse järjekord peaks järgima loogilist ja intuitiivset rada läbi lehe.
• Fookuse indikaatorid: Kõigi fokuseeritavate elementide jaoks peaks olema selge ja nähtav fookuse indikaator.
• Klaviatuurilõksud: Vältige klaviatuurilõksude loomist, kus kasutajad jäävad teatud elemendi sisse kinni ega saa sealt välja navigeerida.
• Kohandatud klaviatuuriinteraktsioonid: Kui rakendate kohandatud klaviatuuriinteraktsioone (nt nooleklahvide kasutamine ruudustikus navigeerimiseks), veenduge, et need interaktsioonid oleksid hästi dokumenteeritud ja kooskõlas kasutaja ootustega.

Klaviatuurinavigatsiooni testimine:

• Kasutage Tab-klahvi: Kasutage Tab-klahvi lehel navigeerimiseks ja veenduge, et fookuse järjekord on loogiline.
• Kasutage Shift+Tab: Kasutage Shift+Tab klahvikombinatsiooni lehel tagurpidi navigeerimiseks.
• Testige kohandatud klaviatuuriinteraktsioone: Testige kõiki kohandatud klaviatuuriinteraktsioone, et tagada nende kasutatavus ja juurdepääsetavus.

5. Värvikontrasti testimine

Ebapiisav värvikontrast võib muuta vaegnägijatel teksti lugemise ja elementide eristamise lehel keeruliseks. Veenduge, et teie veebisait vastab WCAG värvikontrasti nõuetele.

WCAG värvikontrasti nõuded:

• Tekstisisu: Kontrastsuse suhe vähemalt 4.5:1 tavalise teksti puhul ja 3:1 suure teksti puhul (18pt või 14pt paksus kirjas).
• Mittetekstiline sisu: Kontrastsuse suhe vähemalt 3:1 kasutajaliidese komponentide ja graafiliste objektide puhul.

Värvikontrasti testimise tööriistad:

• WebAIM Color Contrast Checker: Veebipõhine tööriist värvikontrastsuse suhete kontrollimiseks.
• axe DevTools: Suudab tuvastada värvikontrasti probleeme.
• Brauseri arendaja tööriistad: Võimaldavad teil kontrollida elementide värvikontrasti.

6. WCAG vastavuse kontrollimine

Veebisisu juurdepääsetavuse suunised (WCAG) on rahvusvaheliselt tunnustatud suuniste kogum, mille eesmärk on muuta veebisisu puuetega inimestele juurdepääsetavaks. Püüdke vastata WCAG 2.1 tasemele AA, mida peetakse laialdaselt veebijuurdepääsetavuse standardiks.

WCAG edukriteeriumide mõistmine:

WCAG on korraldatud nelja põhimõtte (POUR) ümber:

• Tajutav: Teave ja kasutajaliidese komponendid peavad olema esitatavad kasutajatele viisil, mida nad suudavad tajuda.
• Toimiv: Kasutajaliidese komponendid ja navigeerimine peavad olema toimivad.
• Mõistetav: Teave ja kasutajaliidese toimimine peavad olema mõistetavad.
• Robustne: Sisu peab olema piisavalt robustne, et seda saaks usaldusväärselt tõlgendada mitmesuguste kasutajaagentide, sealhulgas abitehnoloogiate poolt.

Igal põhimõttel on suunised ja igal suunisel on testitavad edukriteeriumid. Nende edukriteeriumide mõistmine on WCAG vastavuse tagamiseks ülioluline.

7. Rahvusvahelistamise (i18n) ja lokaliseerimise (l10n) kaalutlused

Globaalse publiku jaoks arvestage oma JavaScriptil põhinevate veebirakenduste rahvusvahelistamise ja lokaliseerimisega. See hõlmab teie sisu ja funktsionaalsuse kohandamist erinevatele keeltele, kultuuridele ja piirkondadele.

Peamised i18n/l10n kaalutlused juurdepääsetavuse jaoks:

• Keeleatribuudid: Kasutage lang atribuuti <html> elemendil ja teistel asjakohastel elementidel, et määrata sisu keel. See aitab ekraanilugejatel valida õige häälduse.
• Teksti suund: Toetage nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) keeli. Kasutage teksti suuna haldamiseks CSS-i omadusi nagu direction ja unicode-bidi.
• Kuupäeva ja kellaaja vormingud: Kasutage erinevate lokaatide jaoks sobivaid kuupäeva ja kellaaja vorminguid.
• Numbrite vormingud: Kasutage erinevate lokaatide jaoks sobivaid numbrivorminguid.
• Valuuta vormingud: Kasutage erinevate lokaatide jaoks sobivaid valuutavorminguid.
• Märgikodeering: Kasutage UTF-8 märgikodeeringut, et toetada laia valikut märke.
• Piltide lokaliseerimine: Pakkuge lokaliseeritud versioone piltidest, mis sisaldavad teksti või kultuurilisi viiteid.
• Ekraanilugeja tugi erinevatele keeltele: Veenduge, et ekraanilugejad, mida testite, toetavad keeli, mida sihtite.

Juurdepääsetava JavaScripti arenduse parimad tavad

Nende parimate tavade rakendamine arenduse käigus võib märkimisväärselt parandada teie JavaScriptil põhinevate veebirakenduste juurdepääsetavust:

• Kasutage semantilist HTML-i: Kasutage sisu struktureerimiseks semantilisi HTML5 silte (nt <article>, <nav>, <aside>, <main>).
• Pakkuge ARIA atribuute: Kasutage ARIA atribuute kohandatud komponentide ja dünaamilise sisu juurdepääsetavuse parandamiseks.
• Hallake fookust: Rakendage nõuetekohast fookuse haldamist, et tagada kasutajatele lihtne lehel navigeerimine klaviatuuriga.
• Kasutage ARIA live-piirkondi: Kasutage ARIA live-piirkondi, et teavitada ekraanilugeja kasutajaid dünaamilistest sisuvärskendustest.
• Testige ekraanilugejatega varakult ja sageli: Integreerige ekraanilugejaga testimine oma arendustöövoogu algusest peale.
• Kirjutage juurdepääsetavat JavaScripti koodi: Järgige JavaScripti koodi kirjutamisel juurdepääsetavuse parimaid tavasid.
• Kasutage juurdepääsetavaid JavaScripti teeke ja raamistikke: Valige JavaScripti teegid ja raamistikud, mis eelistavad juurdepääsetavust.
• Dokumenteerige oma kood: Dokumenteerige oma kood selgelt, sealhulgas kõik juurdepääsetavuse kaalutlused.
• Hankige kasutajate tagasisidet: Küsige tagasisidet puuetega kasutajatelt, et tuvastada potentsiaalseid juurdepääsetavuse probleeme.
• Pakkuge navigeerimislinkide vahelejätmise võimalust: Lubage kasutajatel korduvatest navigeerimiselementidest üle hüpata ja otse põhisisu juurde minna.
• Kasutage kirjeldavat lingiteksti: Vältige üldist lingiteksti nagu "kliki siia". Kasutage kirjeldavat lingiteksti, mis näitab selgelt lingi sihtkohta.
• Pakkuge piltidele tekstialternatiive: Kasutage alt atribuuti piltidele tekstialternatiivide pakkumiseks.
• Kasutage videote jaoks subtiitreid ja transkriptsioone: Pakkuge videotele subtiitreid, et muuta need kurtidele või kuulmispuudega kasutajatele juurdepääsetavaks. Pakkuge helisisu jaoks transkriptsioone.
• Tagage vormide juurdepääsetavus: Kasutage vormiväljade jaoks õigeid silte ja pakkuge selgeid veateateid.
• Rakendage veakäsitlust: Pakkuge kasutajatele selgeid ja informatiivseid veateateid.

Kokkuvõte

Veebijuurdepääsetavuse testimine JavaScripti ekraanilugeja ühilduvuse osas on pidev protsess, mis nõuab pühendumist kaasavale disainile ja arendustavadele. Mõistes väljakutseid, rakendades sobivaid testimistehnikaid ja järgides selles juhendis toodud parimaid tavasid, saate luua veebirakendusi, mis on kõigile juurdepääsetavad ja kasutatavad, olenemata nende võimetest. Pidage meeles, et eelistage käsitsi ekraanilugejaga testimist, täiendage seda automaatsete tööriistadega ja püüdke alati parandada kõigi kasutajate kasutajakogemust.

Veebijuurdepääsetavust omaks võttes ei täida te mitte ainult juriidilisi nõudeid, vaid laiendate ka oma haaret laiema publikuni ja demonstreerite pühendumust kaasatusele ja sotsiaalsele vastutusele globaalses mastaabis.